<template>
  <div class="app-container">
    <h2>合作伙伴</h2>
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="dialogVisible = true">
        新增
      </el-button>
    </div>
    <el-table
      key="data"
      v-loading="loading"
      :data="data"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="left">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 48px; height: 48px"
            :src="row.icon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center">
        <template slot-scope="{row}">
          <span>{{ row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-dropdown @command="handleCommand($event, row)">
            <span class="el-dropdown-link">
              菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="edit">修改</el-dropdown-item>
              <el-dropdown-item command="delete">删除</el-dropdown-item>
              <el-dropdown-item command="enable">启用</el-dropdown-item>
              <el-dropdown-item command="disable">禁用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="方案优势"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form class="basic-form" ref="dialogForm" :model="dialogForm" label-width="80px" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="dialogForm.desc" />
        </el-form-item>
        <el-form-item label="图标" prop="cover">
          <SingleImageUpload v-model="dialogForm.cover" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-waves type="primary" @click="handleSubmit()">确定</el-button>
        <el-button v-waves @click="handleClose()">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as homeHttp from '@/api/home';
import { EventBus } from '@/utils/event-bus';
import waves from '@/directive/waves';
import SingleImageUpload from '@/components/Upload/SingleImage';

export default {
  name: 'feature',
  components: { SingleImageUpload },
  directives: { waves },
  data() {
    return {
      dialogForm: {},
      data: [],
      loading: false,
      dialogVisible: false,

      rules: {}
    };
  },
  created() {
    let { id } = this.$route.params;

    if (id) {
      this.id = id;
      this.getData();
    } else {
      this.id = id = -1
    }

    const levelList = [
      { title: '产品列表', path: '/solutions' },
      { title: '方案详情', path: id ? '/solutions/edit/' + id : '/solutions/create' },
      { title: '项目说明', path: id ? `/solutions/medical/${id}` : '/solutions/medical' },
      { title: '解决问题', path: id ? `/solutions/feature/${id}` : '/solutions/feature' },
      { title: '方案优势', path: id ? `/solutions/advantage/${id}` : '/solutions/advantage' },
      { title: '核心产品', path: id ? `/solutions/product/${id}` : '/solutions/product' },
      { title: '合作伙伴', path: id ? `/solutions/partner/${id}` : '/solutions/partner', redirect: 'noRedirect' },
    ];
    EventBus.$emit('custom-breadcrumb', levelList);
  },

  methods: {
    async getData() {
      this.loading = true;
      const res = await homeHttp.getSolutionById({ id: this.id });

      this.data = res.data.Data && res.data.Data.advantage || [];
      this.loading = false;
    },
    async handleDelete(id) {
      const res = await homeHttp.deleteNewsById({ id });

      this.$message.success('删除成功');
      this.getList();
    },

    handleCommand(command, row) {
      switch (command) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗？', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.handleDelete();
          });
          break;

        case 'edit':
          this.dialogForm = row;
          this.dialogVisible = true;
          break;

        case 'create':
          this.$router.push(`/solutions/feature/edit`);
          break;
      }
    },

    handleClose() {
      this.dialogVisible = false;
      this.$refs['dialogForm'].resetFields();
    },

    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          const res = await homeHttp.updateSolution({ ...this.form, id: this.id });

          if (!res.data.Data) throw new Error('提交失败');

          this.handleClose();
        } catch(e) {
          console.log('solution/feature/medical: ', e);
          this.$message.error('提交失败');
        }
      });
    }
  }
}
</script>
